﻿@using ZhouYu.DreamTour.Model;
@using ZhouYu.DreamTour.Web.Models;
@{
    //产品名称
    var TName = ViewBag.TName;
    //产品描述
    var RouteIntroduce = ViewBag.RouteIntroduce;
    //现金账号信息
    var Cashnumber = ViewBag.Cashnumber as Cashnumber;
    //总价
    var total = ViewBag.total;
    //获取提交订单是产生的订单号
    var Order_No = ViewBag.Order_No;
    var UserInfo = UserInfoContext.userInfoContext.UserInfo;
}
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>行程导航-详情页</title>
    <link href="~/css/style.css" rel="stylesheet" type="text/css" />
    <link href="~/css/common.css" rel="stylesheet" type="text/css" />
    <link href="~/layui-v2.5.4/layui/css/modules/layer/default/layer.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="~/layui-v2.5.4/layui/lay/modules/layer.js"></script>
</head>
<body>
    <div class="top_h clearfix">
        <div class="top_hl"><span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：<b>0571-63322269</b></div>
        <div class="top_hr">
            @if (UserInfo == null)
            {
                <a href="/Home/User_Register">会员注册</a>
                <span>|</span> <a href="/Home/User_Login">登录</a>
                <span>|</span> <a href="#">梦想收藏</a> <span>|</span> <a href="#">设为首页</a>
                @*<a>
                        欢迎你，来到新世界旅行网！
                    </a>*@
            }
            else
            {
                <a href="/Home/User_Center">会员中心</a>
                <span>|</span> <a href="#">梦想收藏</a> <span>|</span> <a href="#">设为首页</a> <span>|</span> <a href="/Login/LoginOut">退出</a> <span>|</span>
                <a>
                    欢迎你，<span>@UserInfo.User_Name</span>来到新世界旅行网！
                </a>
            }
        </div>
    </div>
    </div>
    <div class="head_w">
        <div class="head_t clearfix">
            <div class="logo"><img src="~/images/logo.jpg"></div>
            <div class="rx_line"><img src="~/images/rx.jpg"></div>
        </div>
    </div>
    <div class="mainNav clearfix">
        <ul class="Nav_ul">
            <li><a href="/Home/Index">首页</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Route">旅游路线</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Scenic">旅游景点</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/CateringAccommodation">餐饮住宿</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Traffic_DatailsOne">交通线路</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Group">旅游团购</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Specialty">地方特产</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/AutoGenerationIntro">自动生成简介</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Team_Join">团队简介</a><img src="~/images/nav_line.jpg"></li>
            <li class="cur"><a href="/Home/Itinerary_Details">行程导航</a></li>
        </ul>
    </div>
    <div class="b_wrap">
        <div class="current"><span>当前所在地：</span><a href="/Home/Index">首页</a> >> <a href="/Home/Itinerary_Details">行程导航</a> >> <a href="#">产品详情</a></div>
        <div class="clumn_w clearfix">
            <div class="clumn_l">
                <div class="clumn">
                    <div class="clumn_tit t01">国内热门景点</div>
                    <div class="clumn_con">
                        <div class="cln_w">
                            <p>热门城市</p>
                            <div class="cln_c clearfix">
                                <a href="#">北京</a>
                                <a href="#">上海</a>
                                <a href="#">厦门</a>
                                <a href="#">成都</a>
                                <a href="#">西安</a>
                                <a href="#">黄山</a>
                                <a href="#">香港</a>
                                <a href="#">青岛</a>
                                <a href="#">桂林</a>
                                <a href="#">深圳</a>
                                <a href="#">三亚</a>
                                <a href="#">杭州</a>
                                <a href="#">丽江</a>
                                <a href="#">南京</a>
                                <a href="#">重庆</a>
                                <a href="#">苏州</a>
                                <a href="#">张家界</a>
                            </div>
                        </div>
                        <div class="cln_w">
                            <p>景点认证</p>
                            <div class="cln_c clearfix">
                                <a href="#">5A级</a>
                                <a href="#">4A级</a>
                                <a href="#">3A级</a>
                                <a href="#">2A级</a>
                            </div>
                        </div>
                        <div class="cln_w">
                            <p>热门主题</p>
                            <div class="cln_c clearfix">
                                <a href="#">温泉</a>
                                <a href="#">古镇</a>
                                <a href="#">摄影</a>
                                <a href="#">滑雪</a>
                                <a href="#">海边</a>
                                <a href="#">美食</a>
                                <a href="#">登山</a>
                                <a href="#">主题公园</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clumn">
                    <div class="clumn_tit t02"><span>优惠促销</span><a href="#">更多>></a></div>
                    <div class="clumn_con">
                        <ul class="clu_ul">
                            <li><a href="#">六日黄石公园, 现有女一人，寻女性同游</a></li>
                            <li><a href="#">国庆长假，温哥华维多利亚自助游找伴</a></li>
                            <li><a href="#">去NewFundland，自助游！ 肯定走！</a></li>
                            <li><a href="#">多伦多-温哥华 横跨之旅</a></li>
                            <li><a href="#">诚招一女， 已有7人定下去NewFoundland</a></li>
                            <li><a href="#">六日黄石公园, 现有女一人，寻女性同游</a></li>
                            <li><a href="#">暑期邮轮 特价不断</a></li>
                            <li><a href="#">订机票，选银联，超值特惠</a></li>
                        </ul>
                        <div><center><img src="~/images/add01.jpg"></center></div>
                    </div>
                </div>
                <div class="clumn">
                    <div class="clumn_tit t03"><span>游览历史记录</span><a href="#">更多>></a></div>
                    <div class="clumn_con">
                        <ul class="clu_ul s_ul">
                            <li><a href="#">日本航空·大阪自由行5日    </a><span>¥3152</span></li>
                            <li><a href="#">日本航空·名古屋自由行4日  </a><span>¥3129</span></li>
                            <li><a href="#">购物·东京涉谷原宿自由行5日</a><span>¥5880</span></li>
                            <li><a href="#">日本航空·大阪自由行5日    </a><span>¥3152</span></li>
                            <li><a href="#">日本航空·名古屋自由行4日  </a><span>¥3129</span></li>
                            <li><a href="#">购物·东京涉谷原宿自由行5日</a><span>¥5880</span></li>
                            <li><a href="#">日本航空·大阪自由行5日    </a><span>¥3152</span></li>
                            <li><a href="#">日本航空·名古屋自由行4日  </a><span>¥3129</span></li>
                            <li><a href="#">购物·东京涉谷原宿自由行5日</a><span>¥5880</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clumn_r01">
                <div class="gr_info">
                    <table width="710" border="0" cellspacing="0" cellpadding="0">
                        <caption>填写个人信息</caption>
                        <tbody>
                            <tr>
                                <td width="80" align="right">姓名：</td>
                                <td width="630">
                                    <input class="it_p" type="text" onblur="CheckNameOne()" id="NameOne" name="" value="" placeholder="">&nbsp; <span id="NameOnetxt"></span>
                                    <label>
                                        <input type="radio" name="RadioGroup1" value="单选" id="Radioboy">
                                        男
                                    </label>
                                    <label>
                                        <input type="radio" name="RadioGroup1" value="单选" id="Radiogirl">
                                        女
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">  身份证号：</td>
                                <td><input class="it_p" onblur="ShowFocusOne()" id="idCardone" type="text" name="" value="" placeholder="">&nbsp; <span id="IdCordtxt"></span></td>
                            </tr>
                            <tr>
                                <td align="right">联系人：</td>
                                <td><input class="it_p" id="peopleName" onblur="CheckpeopeName()" type="text" name="" value="" placeholder="">&nbsp; <span id="peopleNametxt"></span></td>
                            </tr>
                            <tr>
                                <td align="right">联系人电话：</td>
                                <td><input class="it_p" onblur="CheckUserTel()" type="text" id="phone" name="" value="" placeholder="">&nbsp; <span id="peoplePhonetxt"></span></td>
                            </tr>
                            <tr>
                                <td align="right" valign="top">备注：</td>
                                <td><textarea id="Context" name="" cols="" rows=""></textarea></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="sp_trans">
                    <div class="trans_con">
                        <p style="color:#28810c;">您正在使用支付宝担保交易</p>
                        <p style="font-weight:bold;font-size:14px;">@RouteIntroduce</p>
                        @*<p><b>帐号</b>（@Cashnumber.Cash_LoginName）可支付余额：<b style="color:#f60;">@Cashnumber.Cash_balance<span>元</span></b></p>*@
                        <p><span class="fk_s">若您不想使用该账号支付，可使用以下其他方式付款，或<a style="color:#006eb4;" href="/Touristroute_Alipay/Touristroute_AlipayIndex?TName=@TName&RouteIntroduce=@RouteIntroduce&total=@total&Order_No=@Order_No">直接支付</a> </span><span class="price_s">¥@total</span></p>
                    </div>
                    <div class="sp_bz"><img src="~/images/baoz.jpg"></div>
                </div>
                <div class="fk_wrap">
                    <div class="fk_tit">您可以使用以下或其他方式付款：</div>
                    <div class="fk_con">
                        <div class="fk_bank">
                            <div class="fk_tw clearfix">
                                <div class="fn-left"><img src="~/images/kj_zf.jpg"></div>
                                <div class="hd_b fn-left">
                                    <ul>
                                        <li><img src="~/images/hui.jpg" align="absmiddle">每天都有银行优惠</li>
                                        <li><img src="~/images/ji.jpg" align="absmiddle">银行积分当钱花</li>
                                        <li><img src="~/images/fan.jpg" align="absmiddle">每10元反一个集分宝</li>
                                    </ul>
                                    <i><img src="~/images/z_row.jpg"></i>
                                </div>
                            </div>
                            <div class="xz_wrap clearfix"><input name="" type="radio" value=""><div class="xz_bank"><img src="~/images/bank_zs.jpg"><span>**2171</span></div></div>
                            <table class="tj_bank" width="660" border="0" cellspacing="0" cellpadding="0">
                                <caption>推荐银行：</caption>
                                <tbody>
                                    <tr>
                                        <td>
                                            <label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0"></label>
                                            <div class="xz_yx">
                                                <div class="yh_zp"><img src="~/images/bank01.jpg"></div>
                                                <div class="yh_xc"><span>惠</span>100减10</div>
                                                <div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_3"></label>
                                            <div class="xz_yx">
                                                <div class="yh_zp"><img src="~/images/bank02.jpg"></div>
                                                <div class="yh_xc"><span>惠</span>100减10</div>
                                                <div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_2"></label>
                                            <div class="xz_yx">
                                                <div class="yh_zp"><img src="~/images/bank01.jpg"></div>
                                                <div class="yh_xc"><span>惠</span>100减10</div>
                                                <div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1"></label>
                                            <div class="xz_yx">
                                                <div class="yh_zp"><img src="~/images/bank01.jpg"></div>
                                                <div class="yh_xc"><span>返</span>2倍</div>
                                                <div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1"></label>
                                            <div class="xz_yx">
                                                <div class="yh_zp"><img src="~/images/bank05.jpg"></div>
                                                <div class="yh_xc"><span>惠</span>100减10</div>
                                                <div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup3"></label>
                                            <div class="xz_yx">
                                                <div class="yh_zp"><img src="~/images/bank06.jpg"></div>
                                                <div class="yh_xc"><span>惠</span>100减10</div>
                                                <div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top"><a class="other01" href="#">选择其他</a></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="web_bank">网上银行：<a href="#">选择其他</a></div>
                        <div class="next_b"><a href="#"><img src="~/images/next.jpg"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    //鼠标焦点离开时调用身份证接口
    function ShowFocusOne() {
        var appkey = "94d9ae7b6b889d1f";
        var idcard = $("#idCardone").val();
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        $.ajax({
            async: true,
            url: "https://api.jisuapi.com/idcard/query?appkey=" + appkey + "&idcard=" + idcard,
            type: "GET",
            dataType: "jsonp", // 返回的数据类型，设置为JSONP方式
            //JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
            jsonp: 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
            jsonpCallback: 'handleResponse', //设置回调函数名
            data: {
                q: "javascript",
                count: 1
            },
            success: function (data, status, xhr) {
                console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                console.log(data);
                if (data != null) {
                    if (data.status == "0") {
                        if (data.result.sex == "男") {
                            $("#Radioboy").prop('checked', true);
                        } else {
                            $("#Radiogirl").prop('checked', true);
                        }
                        $("#IdCordtxt").text("√");
                        $("#IdCordtxt").css("color", "green");
                    }
                    else {
                            $("#IdCordtxt").text("身份证格式不正确！");
                        $("#IdCordtxt").css("color", "red");
                        $("#Radioboy").prop('checked', false);
                        $("#Radiogirl").prop('checked', false);
                    }
                }
            }
        });

    }
    //检查手机号
    function CheckUserTel() {
        var tel = $("#phone").val();
        var reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
        if (tel == "" || reg.test(tel) == false) {
            $("#peoplePhonetxt").text("手机格式数据不正确！");
            $("#peoplePhonetxt").css("color", "red");
            return false;
        }
        $("#peoplePhonetxt").text("√");
        $("#peoplePhonetxt").css("color", "green");
    }
    //验证姓名是否为空
    function CheckNameOne() {
        var Name = $("#NameOne").val();
        if (Name == "") {
            $("#NameOnetxt").text("姓名不能为空！");
            $("#NameOnetxt").css("color", "red");
            return false;
        }
        $("#NameOnetxt").text("√");
        $("#NameOnetxt").css({"color":"green"});
    }
    //检查联系人是否为空
    function CheckpeopeName() {
        var peopleName = $("#peopleName").val();
        if (peopleName == "") {
            $("#peopleNametxt").text("联系人不能为空！");
            $("#peopleNametxt").css("color", "red");
            return false;
        }
        $("#peopleNametxt").text("√");
        $("#peopleNametxt").css("color", "green");
    }
</script>
